﻿<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
	<style>
		html{
			height:100%;
		}
		body{
			padding: 0;
			margin:0;
			height:100%;
		}
		.swipe{
  			width:100%;
		    height:100%;
		    position: relative;
		    overflow: hidden;
		}
		.swipe-wrap{
  			width:100%;
  			overflow: hidden;
  			position: relative;
		}
		.no1{
			background: url(../image/1.jpg) no-repeat;
		}
		.no2{
			background: url(../image/2.jpg) no-repeat;
		}
		.no3{
			background: url(../image/3.jpg) no-repeat;
		}
		.no4{
			background: url(../image/4.jpg) no-repeat;
		}
		.no5{
			background: url(../image/5.jpg) no-repeat;
		}
		.no1,.no2,.no3,.no4,.no5{
  			width:100%;
  			height:100%;
  			position: relative;
		    background-size: 100% 100%;
		    background-position: center center;
		}
		img{
			width:100%;
			height:100%;
			opacity: 0;
		}
		.pic3{
			position: absolute;
			top:0;
			left:0;
			z-index:20;
		}
		.arrow{
			width:20%;
			height:5%;
			position: absolute;
			bottom: 5%	;
			left:40%;
			z-index: 30;	
		}
		.btn1{
			width:90%;
			height:10%;
			display: block;
			position: absolute;
			bottom: 35%;
			left:5%;
			opacity: 0;
			z-index: 30;
			background: url(../image/btn-1.png) no-repeat;
			background-size:100% 100%; 

		}
		.btn2{
			width:90%;
			height:10%;
			display: block;
			position: absolute;
			bottom: 20%;
			left:5%;
			z-index: 30;
			opacity: 0;
			background: url(../image/btn-3.png) no-repeat;
			background-size:100% 100%; 
		}
		@-webkit-keyframes page{
			0%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
		@keyframes page{
			0%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
		@-webkit-keyframes pic{
			0%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
		@keyframes pic{
			0%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
		@keyframes arrow{
			0%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
		@-webkit-keyframes arrow{
			0%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
		@-webkit-keyframes btn1{
			0%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
		@keyframes btn1{
			0%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
		@-webkit-keyframes btn2{
			0%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
		@keyframes btn2{
			0%{
				opacity: 0;
			}
			100%{
				opacity: 1;
			}
		}
		.active .pic2{
			-webkit-animation: page 5s forwards;
			animation: page 5s forwards;
		}
		.active .pic3{
			-webkit-animation: page 5s forwards;
			animation: page 5s forwards;
			-webkit-animation-delay:1s;
			animation-delay:1s;
		}
		.active .btn1{
			-webkit-animation: page 5s forwards;
			animation: page 5s forwards;
			-webkit-animation-delay:1s;
			animation-delay:1s;
		}
		.active .btn2{
			-webkit-animation: page 5s forwards;
			animation: page 5s forwards;
			-webkit-animation-delay:1.5s;
			animation-delay:2s;
		}
		.active .arrow{
			-webkit-animation: page 5s forwards;
			animation: page 5s forwards;
			-webkit-animation-delay:2s;
			animation-delay:2s;
		}
		.down1{
			background: url(../image/btn-2.png) no-repeat;
			-webkit-background-size: 100% 100%; 
			background-size: 100% 100%; 
		}
		.down2{
			background: url(../image/btn-4.png) no-repeat;
			-webkit-background-size: 100% 100%; 
			background-size: 100% 100%;
		}
	</style>
</head>
<body>
    <div id='slider' class='swipe'>
		<div class='swipe-wrap'>
			<div class="no1">
				<img class="pic2" src="../image/1.2.png">
				<img class="pic3" src="../image/1.3.png">
				<img class="arrow" src="../image/arrow.gif">
			</div>
			<div class="no2">
				<img class="pic2" src="../image/2.2.png">
				<img class="pic3" src="../image/2.3.png">
				<img class="arrow" src="../image/arrow.gif">
			</div>
			<div class="no3">
				<img class="pic2" src="../image/3.2.png">
				<img class="pic3" src="../image/3.3.png">
				<img class="arrow" src="../image/arrow.gif">
			</div>
			<div class="no4">
				<img class="pic2" src="../image/4.2.png">
				<img class="pic3" src="../image/4.3.png">
				<img class="arrow" src="../image/arrow.gif">
			</div>
			<div class="no5">
				<img class="pic2" src="../image/5.2.png">
				<img class="pic3" src="../image/5.3.png">
				<a id="send" class="btn1" tapmode="down1" onclick="sendSms('只要一发呆，你的样子就钻进我的脑子里。见鬼！以前我的脑子里可全是吃的啊！！！直到这一天，我才知道，那是因为你!')" href="javascript:void(0)">
				</a>
				<a id="send2" class="btn2" tapmode="down2" onclick="sendSms('只要一发呆，你的样子就钻进我的脑子里。见鬼！以前我的脑子里可全是吃的啊！！！直到这一天，我才知道，那是因为你------是一个好人，二锅头已备好，铁哥们，是这样练成的！')" href="javascript:void(0)">
				</a>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/moving.js"></script>
<script type="text/javascript">

    apiready = function(){
    	api.setStatusBarStyle({
    	    style: 'light'
    	});
	    api.startPlay({
		    path: 'widget://res/AllOfMe.mp3'
		},function(){});
		var movieList = $api.dom('#slider .swipe-wrap');
		$api.dom('.no1').classList.add('active');
	    window.swipeInit = function(){
	        window.movingUnit = new Moving(
	            movieList,
	            {
	                dir: 'y',
	                transEndFn: function() {
	                	switch(movingUnit.currentPoint){
	                		case 1:
	                			$api.addCls($api.dom('.no2'),'active');
	                			break;
	                		case 2:
	                			$api.addCls($api.dom('.no3'),'active');
	                			break;
	                		case 3:
	                			$api.addCls($api.dom('.no4'),'active');
	                			break;
	                		case 4:
	                			$api.addCls($api.dom('.no5'),'active');
	                			break;
	                		default:
	                			break;
	                	}
	                }
	            }
	        );
	    };
	    swipeInit();
    };
    function sendSms(result){
		api.sms({
			numbers: [''],
		    text: result
		},function(ret, err){
		    if(ret.status){
		    } else{
		    }
		});
	}
</script>
</html>